<template>
    <div :class="style.box">
        <template v-if="isNoEmpty">
            <h3 :class="style.title">{{ formData.title }}</h3>
            <div :class="style.goodsList">
                <a v-for="(item, index) in formData.imgList" :key="index" :href="item.imgLink" :class="style.goodsItem">
                    <el-image
                        :class="style.goodsImg"
                        :src="item.imgUrl"
                        fit="cover"
                    >
                    </el-image>
                    <p :class="style.price">11.1元</p>
                </a>
            </div>
        </template>
        <div v-else :class="style.emptyBox">
            点击配置数据
        </div>
    </div>
</template>

<script>
export default {
    name: 'RecommendGoods',
    props: {
        formData: {
            type: Object,
            default: () => ({})
        }
    },
    data () {
        return {
            style: {}
        };
    },
    computed: {
        isNoEmpty () {
            const { formData } = this;
            return formData.imgList && formData.imgList.length > 0;
        }
    }
};
</script>
